<template>
  <div class="box">
    <h1 class="title">帮助</h1>
    <van-collapse style="width: 90vw; margin-top: 10px" v-model="activeNames"  accordion>
      <van-collapse-item 
      v-for="item in infoData" 
      :key="item.id" 
      :title="item.title" 
      :name="item.id"
      > <p 
            v-for="(content,index) in item.content" 
            :key="index"
            style="padding: 5px 0;"
        >{{ content }}</p> </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["1"],
      infoData: [
        {
          id: '1',
          title: "如何选择合适的处理照片？",
          content: ['1.背景干净没有大的杂物，最好是纯色背景',
                    '2.注意避免人物边缘与背景颜色太过接近',
                    '3.注意照片的水平线要摆正',
                    '4.手机拍摄时，请尽量避免阴影打到人物和背景上',
                    '5.建议在柔和光线下进行拍摄']
        },
        {
          id: '2',
          title: "如何用该应用进行抠图？",
          content: ['背景抠除通过调节按钮区间进行，其中灰色按钮表示RGB三色同时调节，可以用作粗调，剩下的红、绿、蓝则用作微调，单独对某个颜色进行范围选择。',
                    '调节时，区间范围越大，则抠除的背景面积越广，当超过临界值时，再怎么调整都是没有效果的，请保证，临界值保持在区间范围内',
                    'tip: 细调时，可以优先把背景的主色范围调大，再调节另外两个颜色，效率会高很多',
                    ]
        },
        {
          id: '3',
          title: "关于导出的问题",
          content: ['部分浏览器无法直接直接保存图片，这个情况下，建议换一个浏览器试试',
                    '如果是通过登陆进入当前页的，也可以选择上传图片后，在首页进行下载']
        },
        {
          id: '4',
          title: "关于裁剪和图像压缩",
          content: ['裁剪时，除自定义外，默认对图片进行压缩处理，以匹配真实尺寸',
                    '用户可以自行选择是否进行压缩处理',
                    ]
        },
      ]
    };
  }
};
</script>

<style scoped>
.box {
  border-radius: 10px;
}
.title {
  padding: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  margin-top: 8px;
}
</style>